<template>
  <div>
    <Row type="flex">
      <Cell width="24">
        <div style="display:flex" class="text-left">
          <Search
            style="margin-bottom:10px;text-align:center"
            @search="search"
            v-model="searchWord"
            showSearchButton
            placeholder="搜索葡萄种类"
            triggerType="enter"
            :width="300"
            block
          >
            <i class="h-icon-search"></i
          ></Search>
          <button
            @click="addType"
            style="height:30px;margin-left:20px"
            class="h-btn h-btn-primary"
          >
            添加葡萄种类
          </button>
        </div>
        <Table :datas="list" :height="550" border stripe :loading="loading">
          <TableItem
            title="ID"
            sort="auto"
            align="center"
            prop="id"
          ></TableItem>
          <TableItem title="名称" align="center" prop="type_name"> </TableItem>

          <TableItem title="操作" align="center" :width="180" fixed="right">
            <template slot-scope="{ data }">
              <i
                v-tooltip
                placement="left"
                content="编辑"
                class="h-btn h-btn-s h-btn-blue iconfont icon-icon-test3"
                @click="editor(data)"
              >
              </i>
              <i
                v-tooltip
                placement="right"
                content="删除"
                class=" iconfont icon-shanchu h-btn h-btn-s h-btn-red"
                @click="delType(data.id)"
              ></i>
            </template>
          </TableItem>
          <div slot="empty">暂时无数据</div>
        </Table>
        <Pagination
          style=" margin-top:20px"
          v-model="pagination"
          align="center"
          @change="currentChange"
          small
        ></Pagination>
      </Cell>
    </Row>

    <!--  葡萄种类添加 -->
    <Modal v-model="TypeDialog">
      <div class="h-modal-header  text-right">
        <Button
          :icon-circle="true"
          @click="closeType"
          icon=" h-icon-close"
          color="primary"
        ></Button>
      </div>
      <div
        style="width:470px;
      max-height: 400px;
      max-width:500px;
      min-width:450px;
      padding-bottom:22px;
      "
      >
        <Form
          mode="twocolumn"
          :label-width="110"
          :model="form"
          :rules="validationRules"
          ref="form"
          :top="0.2"
          showErrorTip
        >
          <FormItem single label="葡萄种类名称" prop="type_name">
            <input
              style="width:300px"
              autofocus
              type="text"
              v-model="form.type_name"
              placeholder="输入葡萄种类名称"
              v-wordlimit="30"
            />
          </FormItem>

          <FormItem :no-padding="true" style="text-align:left" single>
            <Button color="green" v-if="!isUpdate" @click="submit">新增</Button>
            <Button color="green" v-else @click="update">更新</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name:"productType",
  data() {
    return {
      // 更新还是新建
      isUpdate: false,
      // 要更新的ID
      updateID: null,

      // 创建dailog
      TypeDialog: false,
      form: {
        type_name: ""
      },
      validationRules: {
        rules: {},
        required: ["type_name"]
      },
      searchWord: null,
      pagination: {
        page: 1,
        size: 10,
        total: 0
      },
      // 表格的loading
      loading: true,
      list: []
    };
  },
  methods: {
    addType() {
      this.TypeDialog = true;
    },
    closeType() {
      this.TypeDialog = false;
      this.isUpdate = false;
      this.form.type_name = "";
    },
    search() {
      // if (!data) return;
      this.getTypeList();
    },
    currentChange() {
      // console.log(v);
      this.getTypeList();
    },
    delType(id) {
      this.$Confirm("确认删除？")
        .then(async () => {
          let res = await this.$post(`/api/product/type/delete/${id}`);
          // console.log(res);
          if (res && res.code === 200) {
            this.$Message.success("删除成功");
            this.getTypeList();
          } else {
            this.$Message.error("取消");
          }
          // this.$Message.success("确定删除！");
        })
        .catch(() => {});
    },
    editor(data) {
      // 一定要清空表单，一定要清空状态。比如id。更新或者添加的按钮
      this.TypeDialog = true;
      this.form.type_name = data.type_name;
      this.updateID = data.id;
      this.isUpdate = true;
    },

    async getTypeList() {
      this.loading = false;
      let res = await this.$get("/api/product/type/list", {
        limit: this.pagination.size,
        page: this.pagination.page,
        searchWord: this.searchWord
      });
      if (res && res.code === 200) {
        this.list = res.data.list;
        this.pagination.total = res.data.count;
      } else {
        this.loading = false;
        this.$Message.error("获取失败,请刷新重试");
      }
    },
    async update() {
      let res = await this.$post(`/api/product/type/update/${this.updateID}`, {
        id: this.updateID,
        type_name: this.form.type_name
      });
      if (res && res.code === 200) {
        this.$Message.success("更新成功");
        this.TypeDialog = false;
        this.getTypeList();
      } else {
        this.$Message.error("更新失败");
        this.TypeDialog = false;
      }
      this.isUpdate = false;
      this.updateID = null;
      this.form.type_name = "";
    },
    async submit() {
      let validResult = this.$refs.form.valid();
      if (validResult.result) {
        let res = await this.$post("/api/product/type/create", {
          type_name: this.form.type_name
        });
        if (res && res.code === 200) {
          this.$Message.success("添加成功");
          this.getTypeList();
          this.TypeDialog = false;
          this.form.type_name = "";
        } else {
          this.$Message.error(res.message);
        }
      }
    }
  },
  mounted() {
    this.getTypeList();
  }
};
</script>

<style lang="less" scoped>
.logo {
  margin-left: -30%;
  padding-top: 15px;
  height: 10px;
  text-align: center;
  i {
    font-size: 16px;
    color: #e11617;
  }
  img {
    margin: 0 10px;
    width: 80px;
    height: 80px;
  }
}
</style>